
<!--
    @author Steven Kester Yuwono
    // Main html page for List Visualisation
    // It includes Linked List, Stack, Queue, Doubly List, and Double-Ended Queue
-->
<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<title>VisuAlgo - Linked List</title>
<link rel="icon" type="image/png" href="img/favicon.png" />

<!--css-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/viz.css">

<link rel="stylesheet" href="css/list.css">

<!--js-->
<script src="js/external/jquery-1.10.2.js"></script>
<script src="js/external/jquery-ui.js"></script>
<script src="js/external/d3.v3.js"></script>
<script src="js/viz.js"></script>
<script src="js/common.js"></script>
<script src="js/actions/list_actions.js"></script>
<!--script src="//connect.facebook.net/en_US/all.js"></script-->
<!-- more scripts are below-->

<!--fonts-->
<link href="fonts/silkscreen/stylesheet.css" rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

</head>

<body>

<div id="top-bar">
	<a id="home" href="index.html">Visu<span class="colour">Algo</span></a>
    <span id="title">
    	<a id="title-LL" class="selected-viz">Linked List</a>
        <a id="title-Stack">Stack</a>
        <a id="title-Queue">Queue</a>
        <a id="title-DLL">Doubly Linked List</a>
        <a id="title-Deque">Deque</a>
    </span>
    <!--a id="fb-login" href="#" target="_blank">Facebook connect</a>
    <span id="trick">
		<fb:login-button show-faces="false" width="200" max-rows="1" style="float: right; margin-top: 9px;"></fb:login-button>
    </span-->
    <div id="mode-menu">
    	<div id="mode-button">Exploration Mode<img src="img/arrow_white.png"/></div>
        <div id="other-modes">
            <a href="#">Tutorial Mode</a>
        </div>
    </div>
</div>

    <div id="viz"></div>
    
    <div id="current-action" class="panel"><p></p></div>
    
  
    <div id="actions" class="panel">
    	<p id="create">Create</p>
        <p id="search" class="execAction" onClick=searchGeneric()>Search</p>
		<p id="insert">Insert</p>
		<p id="remove" class="execAction" onClick=removeGeneric()>Remove</p>
    </div>

    <div id="actions-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide actions panel"/></div>

    <!-- START LINKED LIST DIV -->
    <div id="actions-extras">
    <!--put all the extra action pullouts (input) and error messages here-->
    	<div class="create action-menu-pullout">
    		<div id="create-random" class="execAction new-menu-option coloured-menu-option" onClick=random()><p>Random</p></div>
    		<div id="create-random-sorted" class="execAction new-menu-option coloured-menu-option" onClick=randomLL()><p>Random Sorted</p></div>
    		
    		<div id="create-random-fixed-size" class="execAction new-menu-option coloured-menu-option" onclick=createModelingOpen("createfixedsize")><p>Random Fixed Size</p>
    			<div id="createfixedsize-input" class="new-menu-option">
    				<input type="text" id="v-create-size" title="Enter the size of the linked list" autocomplete="off" value=3 />
                	<div id="createfixedsize-go" class="execAction coloured-menu-option"  onClick=randomFixedSize() title="Create random fixed size linked list"><p>GO</p></div>
                </div>
    		</div>
    		<!-- <div id="create-input-arr" class="new-menu-option"><input type="text" id="v-create-arr" title="Enter the elements separated by comma" autocomplete="off" value="1,2,3" /></div> -->
    		<div id="create-from-arr" class="execAction new-menu-option coloured-menu-option" onclick=createModelingOpen("createuserdefined")><p>--- User Defined List ---</p>
    			<div id="createuserdefined-input" class="new-menu-option">
    				<input type="text" id="v-create-arr" title="Enter the elements separated by comma" autocomplete="off" value="1,2,3" />
                	<div id="createuserdefined-go" class="execAction coloured-menu-option"  onClick=nonRandom() title="Create random fixed size linked list"><p>GO</p></div>
                </div>
            </div>
    		<div id="create-err" class="err"></div>
    	</div>

    	<div class="search action-menu-pullout">
            <!-- peek for deque-->
            <div id="search-peek-front" style="display:none;" class="execAction new-menu-option coloured-menu-option"  onclick=peekDeque("front")><p>Front</p></div>
            <div id="search-peek-back" style="display:none;" class="execAction new-menu-option coloured-menu-option"  onclick=peekDeque("back")><p>Back</p></div>
            <!-- end peek -->

            <div id="search-input" class="new-menu-option"><input type="text" id="v-search" title="Enter an integer" autocomplete="off" value=5 /></div>
            <div id="search-go" class="execAction coloured-menu-option" onclick=searchVertex()><p>GO</p></div>
            <div id="search-err" class="err"></div>
        </div>
        
        <div class="insert action-menu-pullout">
        	<!-- initially hidden -->
        	<!-- for push top-->
            <div id="pushtop-input" style="display:none;" class="new-menu-option"><input type="text" id="v-push-top-value" title="Enter an integer" autocomplete="off" value=53 /></div>
            <div id="pushtop-go" style="display:none;" class="execAction coloured-menu-option" onclick=pushTop()><p>GO</p></div>
        	<!-- for enqueue back -->
			<div id="enqueueback-input" style="display:none;" class="new-menu-option"><input type="text" id="v-enqueue-back-value" title="Enter an integer" autocomplete="off" value=57 /></div>
            <div id="enqueueback-go" style="display:none;" class="execAction coloured-menu-option" onclick=enqueueBack()><p>GO</p></div>
            <!-- for dequeue -->
            <div id="insert-deque-input" style="display:none;" class="new-menu-option"><input type="text" id="v-insert-deque-value" title="Enter an integer" autocomplete="off" value=57 /></div>
            <div id="insert-deque-front" style="display:none;" class="execAction new-menu-option coloured-menu-option"  onclick=insertDeque("front")><p>Front</p></div>
            <div id="insert-deque-back" style="display:none;" class="execAction new-menu-option coloured-menu-option"  onclick=insertDeque("back")><p>Back</p></div>
        	<!-- initially hidden end -->


            <!-- for original linked list -->
        	<div id="insert-kth" class="execAction new-menu-option coloured-menu-option" onclick=insertModelingOpen("insertkth")><p> ----- Insert k-th -----</p>
              <div id="insertkth-input" class="new-menu-option">
                <input type="text" id="v-insert-kth-value" title="Enter an integer to be inserted" autocomplete="off" value=90 />
                <input type="text" id="v-insert-kth" title="Enter the index" autocomplete="off" value=2 />
                <div id="insertkth-go" class="execAction coloured-menu-option" onClick=insertKth() title="Insert to kth"><p>GO</p></div>
              </div>
            </div>

            <div id="insert-head" class="execAction new-menu-option coloured-menu-option" onclick=insertModelingOpen("inserthead")><p> -- Insert Head -- </p>
              <div id="inserthead-input" class="new-menu-option">
                <input type="text" id="v-insert-head-value" title="Enter an integer to be inserted" autocomplete="off" value=85 />
                <div id="inserthead-go" class="execAction coloured-menu-option"  onClick=insertHead() title="Insert to Head"><p>GO</p></div>
              </div>
            </div>

            <div id="insert-tail" class="execAction new-menu-option coloured-menu-option" onclick=insertModelingOpen("inserttail")><p> -- Insert Tail -- </p>
              <div id="inserttail-input" class="new-menu-option">
                <input type="text" id="v-insert-tail-value" title="Enter an integer to be inserted" autocomplete="off" value=80 />
                <div id="inserttail-go" class="execAction coloured-menu-option"  onClick=insertTail() title="Insert to Tail"><p>GO</p></div>
              </div>
            </div>

            <div id="insert-err" class="err"></div>
            <!-- for original linked list end -->

            <!-- <div id="insert-input" class="new-menu-option"><input type="text" id="v-insert" title="Enter an integer or comma-separated array of integers" autocomplete="off" value=20 /></div>
 			<div id="insert-head" class="execAction new-menu-option coloured-menu-option" onClick=insertHead()><p>Insert to Head</p></div>
            <div id="insert-tail" class="execAction new-menu-option coloured-menu-option" onClick=insertTail()><p>Insert to Tail</p></div>
            <div id="insert-input-kth" class="new-menu-option"><input type="text" id="v-insert-kth" title="Enter the index to be inserted" autocomplete="off" value=0 /></div>
            <div id="insert-kth" class="execAction new-menu-option coloured-menu-option" onClick=insertKth()><p>Insert to k-th</p></div>
            <div id="insert-err" class="err"></div> -->
        </div>
        
        <div class="remove action-menu-pullout">

            <!--dequeue for deque -->
            <div id="remove-deque-front" style="display:none;" class="execAction new-menu-option coloured-menu-option"  onclick=removeDeque("front")><p>Front</p></div>
            <div id="remove-deque-back" style="display:none;" class="execAction new-menu-option coloured-menu-option"  onclick=removeDeque("back")><p>Back</p></div>
            <!-- end -->

       		<div id="remove-head" class="execAction new-menu-option coloured-menu-option" onClick=removeHead()><p>Remove Head</p></div>
            <div id="remove-tail" class="execAction new-menu-option coloured-menu-option" onClick=removeTail()><p>Remove Tail</p></div>
            <div id="remove-kth" class="execAction new-menu-option coloured-menu-option" onclick=removeModelingOpen("removekth")><p>Remove k-th</p>
              <div id="removekth-input" class="new-menu-option">
                <input type="text" id="v-remove-kth" title="Enter the index to be removed" autocomplete="off" value=2 />
                <div id="removekth-go" class="execAction coloured-menu-option" onClick=removeKth() title="Remove k-th"><p>GO</p></div>
              </div>
            </div>
        	<div id="remove-err" class="err"></div>
        </div>
      
    </div>
    <!-- END LINKED LIST DIV -->

    
    <div id="status" class="panel"><p></p></div>
    <div id="status-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide status panel"/></div>
    
    <div id="codetrace" class="panel">
    	<!--can add class "highlighed" to hightlight one line-->
    	<p id="code1" style="padding-top: 10px;"></p>
        <p id="code2"></p>
        <p id="code3"></p>
		<p id="code4"></p>
		<p id="code5"></p>
		<p id="code6"></p>
		<p id="code7" style="padding-bottom: 10px;"></p>
    </div>
    <div id="codetrace-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide codetrace panel"/></div>
    
<div id="left-bar"></div>
<div id="right-bar"></div>
<!-- Bottom bar and overlay popups -->
<div id="bottom-bar">
	<a id="trigger-about">About</a>
    <a id="trigger-team">Team</a>
    <a id="trigger-terms">Terms of use</a>
</div>

<div id="media-controls">
	<div id="speed-control">slow<div id="speed-input"></div>fast</div>
	<span id="go-to-beginning" class="media-control-button" title="go to beginning" onclick=goToBeginning()><img src="img/goToBeginning.png" alt="go to beginning" /></span>
	<span id="previous" class="media-control-button" title="step backward" onclick=stepBackward()><img src="img/prevFrame.png" alt="previous frame" /></span>
    <span id="pause" class="media-control-button" title="pause" onclick=pause()><img src="img/pause.png" alt="pause" /></span>
    <span id="play" class="media-control-button" title="play" onclick=play()><img src="img/play.png" alt="play" /></span>
    <span id="next" class="media-control-button" title="step forward" onclick=stepForward()><img src="img/nextFrame.png" alt="next frame" /></span>
    <span id="go-to-end" class="media-control-button" title="go to end" onclick=goToEnd()><img src="img/goToEnd.png" alt="go to end"/></span>
    <div id="progress-bar" class="media-control-button"></div>
</div>

<div id="dark-overlay"></div>
<div id="about" class="overlays"></div>
<div id="team" class="overlays"></div>
<div id="termsofuse" class="overlays"></div>

<!--tutorial dialogs here-->
<div id="list-tutorial-1" class="tutorial-dialog">
    <span id="list-tutorial-1-text">Linked list is a data structure consisting of a group of vertices which together represent a sequence. Under the simplest form, each vertex is composed of a data and a reference (in other words, a link) to the next vertex in the sequence. </span>
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-2" class="tutorial-dialog">
	To toggle between the Linked List, Stack, Queue, Doubly Linked List, and Deque, select the respective header.
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-3" class="tutorial-dialog">
	All available operations will be shown here. Select an action and provide the necessary input, and the action will be animated in the visualisation area.
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-4" class="tutorial-dialog">
	View the visualisation here!
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-5" class="tutorial-dialog">
	As the action is being carried out, each step will be described in the status panel.
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-6" class="tutorial-dialog">
	You can also follow the psuedocode highlights to trace the algorithm.
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-7" class="tutorial-dialog">
	Control the animation with the player controls! Keyboard shortcuts are:<br/>
    <div style="margin-top: 8px;"><strong>Spacebar:</strong> play/pause/replay</div>
    <strong>Left/right arrows:</strong> step backward/step forward<br/>
    <strong>-/+:</strong> decrease/increase speed<br/>
    <div class="tutorial-next">Next<img src="img/arrow_white_right.png"/></div>
</div>
<div id="list-tutorial-8" class="tutorial-dialog">
	Return to "Exploration Mode" to start exploring!
</div>

<script src="js/graph_library/constant.js"></script>
<script src="js/graph_library/properties.js"></script>
<script src="js/graph_library/helperObjects.js"></script>
<script src="js/graph_library/misc.js"></script>
<script src="js/graph_library/Widget.js"></script>
<script src="js/graph_library/GraphWidget.js"></script>
<script src="js/graph_library/GraphVertexWidget.js"></script>
<script src="js/graph_library/GraphEdgeWidget.js"></script>
<script src="js/widgets/ListWidget.js"></script>

<script type="text/javascript">
	$('#play').hide();

	//this viz-specific code
	var listWidget = new List();
    var gw = listWidget.getGraphWidget();
    listWidget.setActiveStatus("list");
	
	//title changing
	$('#title-LL').click(function() {
		if(isPlaying) {	stop(); }
		hideEntireActionsPanel();
		showActionsPanel();
		displayList();
        changeTextList();
		hideStatusPanel();
		hideCodetracePanel();
		listWidget.setActiveStatus("list");
	});
	$('#title-Stack').click(function() {
		if(isPlaying) {	stop(); }
		hideEntireActionsPanel();
		showActionsPanel();
		displayStack();
        changeTextStack();
		hideStatusPanel();
		hideCodetracePanel();
		listWidget.setActiveStatus("stack");
	});
	$('#title-Queue').click(function() {
		if(isPlaying) {	stop(); }
		hideEntireActionsPanel();
		showActionsPanel();
		displayQueue();
        changeTextQueue();
		hideStatusPanel();
		hideCodetracePanel();
		listWidget.setActiveStatus("queue");
	});
	$('#title-DLL').click(function() {
		if(isPlaying) {	stop(); }
		hideEntireActionsPanel();
		displayList();
        changeTextDoublyList();
		showActionsPanel();
		hideStatusPanel();
		hideCodetracePanel();
        listWidget.setActiveStatus("doublylist");
	});
	$('#title-Deque').click(function() {
		if(isPlaying) {	stop(); }
		hideEntireActionsPanel();
		displayDeque();
        changeTextDeque();
		showActionsPanel();
		hideStatusPanel();
		hideCodetracePanel();
        listWidget.setActiveStatus("deque");
	});



	function displayList(){
        document.getElementById("insert-deque-input").style.display = "none";
        document.getElementById("insert-deque-front").style.display = "none";
        document.getElementById("insert-deque-back").style.display = "none";
        document.getElementById("remove-deque-front").style.display = "none";
        document.getElementById("remove-deque-back").style.display = "none";
        document.getElementById("search-peek-front").style.display = "none";
        document.getElementById("search-peek-back").style.display = "none";
		document.getElementById("enqueueback-input").style.display = "none";
		document.getElementById("enqueueback-go").style.display = "none";
		document.getElementById("pushtop-input").style.display = "none";
		document.getElementById("pushtop-go").style.display = "none";
		document.getElementById("search-input").style.display = "";
		document.getElementById("search-go").style.display = "";
		document.getElementById("insert-head").style.display = "";
		document.getElementById("insert-tail").style.display = "";
		document.getElementById("insert-kth").style.display = "";
		document.getElementById("remove-head").style.display = "";
		document.getElementById("remove-tail").style.display = "";
		document.getElementById("remove-kth").style.display = "";
	}

	function displayStack(){
        document.getElementById("insert-deque-input").style.display = "none";
        document.getElementById("insert-deque-front").style.display = "none";
        document.getElementById("insert-deque-back").style.display = "none";
        document.getElementById("remove-deque-front").style.display = "none";
        document.getElementById("remove-deque-back").style.display = "none";
        document.getElementById("search-peek-front").style.display = "none";
        document.getElementById("search-peek-back").style.display = "none";
		document.getElementById("enqueueback-input").style.display = "none";
		document.getElementById("enqueueback-go").style.display = "none";
		document.getElementById("pushtop-input").style.display = "";
		document.getElementById("pushtop-go").style.display = "";
		document.getElementById("search-input").style.display = "none";
		document.getElementById("search-go").style.display = "none";
		document.getElementById("insert-head").style.display = "none";
		document.getElementById("insert-tail").style.display = "none";
		document.getElementById("insert-kth").style.display = "none";
		document.getElementById("remove-head").style.display = "none";
		document.getElementById("remove-tail").style.display = "none";
		document.getElementById("remove-kth").style.display = "none";
	}

	function displayQueue(){
        document.getElementById("insert-deque-input").style.display = "none";
        document.getElementById("insert-deque-front").style.display = "none";
        document.getElementById("insert-deque-back").style.display = "none";
        document.getElementById("remove-deque-front").style.display = "none";
        document.getElementById("remove-deque-back").style.display = "none";
        document.getElementById("search-peek-front").style.display = "none";
        document.getElementById("search-peek-back").style.display = "none";
		document.getElementById("enqueueback-input").style.display = "";
		document.getElementById("enqueueback-go").style.display = "";
		document.getElementById("pushtop-input").style.display = "none";
		document.getElementById("pushtop-go").style.display = "none";
		document.getElementById("search-input").style.display = "none";
		document.getElementById("search-go").style.display = "none";
		document.getElementById("insert-head").style.display = "none";
		document.getElementById("insert-tail").style.display = "none";
		document.getElementById("insert-kth").style.display = "none";
		document.getElementById("remove-head").style.display = "none";
		document.getElementById("remove-tail").style.display = "none";
		document.getElementById("remove-kth").style.display = "none";		
	}

    function displayDeque(){
        document.getElementById("insert-deque-input").style.display = "";
        document.getElementById("insert-deque-front").style.display = "";
        document.getElementById("insert-deque-back").style.display = "";
        document.getElementById("remove-deque-front").style.display = "";
        document.getElementById("remove-deque-back").style.display = "";
        document.getElementById("search-peek-front").style.display = "";
        document.getElementById("search-peek-back").style.display = "";
        document.getElementById("enqueueback-input").style.display = "none";
        document.getElementById("enqueueback-go").style.display = "none";
        document.getElementById("pushtop-input").style.display = "none";
        document.getElementById("pushtop-go").style.display = "none";
        document.getElementById("search-input").style.display = "none";
        document.getElementById("search-go").style.display = "none";
        document.getElementById("insert-head").style.display = "none";
        document.getElementById("insert-tail").style.display = "none";
        document.getElementById("insert-kth").style.display = "none";
        document.getElementById("remove-head").style.display = "none";
        document.getElementById("remove-tail").style.display = "none";
        document.getElementById("remove-kth").style.display = "none";
    }

	function changeTextList(){
        document.getElementById('list-tutorial-1-text').innerHTML = "Linked list is a data structure consisting of a group of vertices which together represent a sequence. Under the simplest form, each vertex is composed of a data and a reference (in other words, a link) to the next vertex in the sequence.";
		document.getElementById('create').innerHTML = "Create";
		document.getElementById('search').innerHTML = "Search";
		document.getElementById('insert').innerHTML = "Insert";
		document.getElementById('remove').innerHTML = "Remove";
	}

	function changeTextStack(){
         document.getElementById('list-tutorial-1-text').innerHTML = "Stack is a particular kind of abstract data type or collection in which the principal (or only) operations on the collection are the addition of an entity to the collection, known as push and removal of an entity, known as pop. It is known as  Last-In-First-Out (LIFO) data structure.";
		document.getElementById('create').innerHTML = "Create";
		document.getElementById('search').innerHTML = "Peek";
		document.getElementById('insert').innerHTML = "Push";
		document.getElementById('remove').innerHTML = "Pop";
	}

	function changeTextQueue(){
        document.getElementById('list-tutorial-1-text').innerHTML = "Queue is a particular kind of abstract data type or collection in which the entities in the collection are kept in order and the principal (or only) operations on the collection are the addition of entities to the rear terminal position, known as enqueue, and removal of entities from the front terminal position, known as dequeue. It is known as First-In-First-Out (FIFO) data structure.";
		document.getElementById('create').innerHTML = "Create";
		document.getElementById('search').innerHTML = "Peek";
		document.getElementById('insert').innerHTML = "Enqueue";
		document.getElementById('remove').innerHTML = "Dequeue";
	}

    function changeTextDoublyList(){
        document.getElementById('list-tutorial-1-text').innerHTML = "Doubly-linked list is a linked data structure that consists of a set of sequentially linked records called vertices. Each vertex contains two fields, called links, that are references to the previous and to the next vertex in the sequence of vertices.";
        document.getElementById('create').innerHTML = "Create";
        document.getElementById('search').innerHTML = "Search";
        document.getElementById('insert').innerHTML = "Insert";
        document.getElementById('remove').innerHTML = "Remove";
    }

    function changeTextDeque(){
        document.getElementById('list-tutorial-1-text').innerHTML = "Double-ended queue (dequeue, often abbreviated to deque, pronounced deck) is an abstract data type that generalizes a queue, for which elements can be added to or removed from either the front (head) or back (tail).";
        document.getElementById('create').innerHTML = "Create";
        document.getElementById('search').innerHTML = "Peek";
        document.getElementById('insert').innerHTML = "Enqueue";
        document.getElementById('remove').innerHTML = "Dequeue";
    }

	function searchGeneric(){
		if(listWidget.getActiveStatus()=="list"){
            //do nothing
            //open next level option
		}
		else if(listWidget.getActiveStatus()=="stack"){
			peekStack();
		}
		else if(listWidget.getActiveStatus()=="queue"){
			peekQueue();
		}
        else if(listWidget.getActiveStatus()=="doublylist"){
            //do nothing
            //open next level option
        }
        else if(listWidget.getActiveStatus()=="deque"){
           //do nothing
           //open next level option
        }
	}

	function removeGeneric(){
		if(listWidget.getActiveStatus()=="list"){
            //do nothing
            //open next level option
		}
		else if(listWidget.getActiveStatus()=="stack"){
			removeHead();
		}
		else if(listWidget.getActiveStatus()=="queue"){
			removeHead();
		}
        else if(listWidget.getActiveStatus()=="doublylist"){
            //do nothing
            //open next level option
        }
        else if(listWidget.getActiveStatus()=="deque"){
           //do nothing
           //open next level option
        }
	}

	function random() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&listWidget.generateRandom()) {
				 $('#progress-bar').slider( "option", "max", 0);
				closeCreate();
				isPlaying = false;
			}
		}, 500)
		hideStatusPanel();
		hideCodetracePanel();
	}

	function randomLL() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&listWidget.generateRandomSorted()) {
				 $('#progress-bar').slider( "option", "max", 0);
				closeCreate();
				isPlaying = false;
			}
		}, 500)
		hideStatusPanel();
		hideCodetracePanel();
	}

	function randomFixedSize(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-create-size').val();
			input = parseInt(input);
			if((mode=="exploration")&&listWidget.generateRandomFixedSize(input)) {
				 $('#progress-bar').slider( "option", "max", 0);
				closeCreate();
				isPlaying = false;
			}
		}, 500)
		hideStatusPanel();
		hideCodetracePanel();
	}

	function nonRandom(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-create-arr').val();
			input = input.split(",");
			if((mode=="exploration")&&listWidget.generateUserDefined(input)) {
				 $('#progress-bar').slider( "option", "max", 0);
				closeCreate();
				isPlaying = false;
			}
		}, 500)
		hideStatusPanel();
		hideCodetracePanel();
	}

	 function peekStack(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&listWidget.peek()) {
				$('#current-action').show();
				$('#current-action p').html("Peek Top");
				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
    }

     function peekQueue(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&listWidget.peek()) {
				$('#current-action').show();
				$('#current-action p').html("Peek Front");
				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
    }

    function peekDeque(location){
       if(isPlaying) {  stop(); }
        setTimeout( function() {
            if(location == "front"){
                if((mode=="exploration")&&listWidget.peek()) {
                    $('#current-action').show();
                    $('#current-action p').html("Peek Front");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
            else{
                if((mode=="exploration")&&listWidget.peekBack()) {
                    $('#current-action').show();
                    $('#current-action p').html("Peek Back");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
        }, 500)
    }

    function searchVertex(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-search').val();
			input = parseInt(input);
			if((mode=="exploration")&&listWidget.search(input)) {
				$('#current-action').show();
				$('#current-action p').html("Search for "+ input);
				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
    }

    function pushTop(){
 		if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-push-top-value').val();
			if((mode=="exploration")&&listWidget.insertArrHead(input)) {
				$('#current-action').show();
				$('#current-action p').html("Insert "+ input);
				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
				triggerRightPanels();
				isPlaying = true;
			}	
		}, 500)
    }

    function enqueueBack(){
    	if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-enqueue-back-value').val();
			if((mode=="exploration")&&listWidget.insertArrTail(input)) {
				$('#current-action').show();
				$('#current-action p').html("Insert "+ input);
				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
    }


 	function insertHead(){
 		if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-insert-head-value').val();
            if(listWidget.getActiveStatus()=="doublylist"){
                if((mode=="exploration")&&listWidget.insertArrHeadDoublyList(input)) {
                    $('#current-action').show();
                    $('#current-action p').html("Insert "+ input);
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }   
            }
            else{
    			if((mode=="exploration")&&listWidget.insertArrHead(input)) {
    				$('#current-action').show();
    				$('#current-action p').html("Insert "+ input);
    				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
    				triggerRightPanels();
    				isPlaying = true;
    			}	
            }
		}, 500)
    }

    function insertTail(){
    	if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-insert-tail-value').val();
            if(listWidget.getActiveStatus()=="doublylist"){
                 if((mode=="exploration")&&listWidget.insertArrTailDoublyList(input)) {
                    $('#current-action').show();
                    $('#current-action p').html("Insert "+ input);
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
            else{
                if((mode=="exploration")&&listWidget.insertArrTail(input)) {
                    $('#current-action').show();
                    $('#current-action p').html("Insert "+ input);
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
			
		}, 500)
    }

    function insertKth(){
    	if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-insert-kth-value').val();
			var index = $('#v-insert-kth').val();
			//input = input.split(",");
             if(listWidget.getActiveStatus()=="doublylist"){
                if((mode=="exploration")&&listWidget.insertArrKthDoublyList(input,index)) {
                    $('#current-action').show();
                    $('#current-action p').html("Insert "+ input);
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
             }
             else{
    			if((mode=="exploration")&&listWidget.insertArrKth(input,index)) {
    				$('#current-action').show();
    				$('#current-action p').html("Insert "+ input);
    				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
    				triggerRightPanels();
    				isPlaying = true;
    			}
            }
		}, 500)
    }

 function insertDeque(location){
       if(isPlaying) {  stop(); }
        setTimeout( function() {
            var input = $('#v-insert-deque-value').val();
            if(location == "front"){
                if((mode=="exploration")&&listWidget.insertArrHeadDoublyList(input)) {
                    $('#current-action').show();
                    $('#current-action p').html("Insert "+ input + " to Front");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }   
            }
            else{
                if((mode=="exploration")&&listWidget.insertArrTailDoublyList(input)) {
                    $('#current-action').show();
                    $('#current-action p').html("Insert "+ input + " to Back");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
        }, 500)
    }


//another stub function created by me
	function removeHead(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
            if(listWidget.getActiveStatus()=="doublylist"){
                if((mode=="exploration")&&listWidget.removeArrHeadDoublyList()) {
                    $('#current-action').show();
                    $('#current-action p').html("Remove head");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
            else{
    			if((mode=="exploration")&&listWidget.removeArrHead()) {
    				$('#current-action').show();
    				$('#current-action p').html("Remove head");
    				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
    				triggerRightPanels();
    				isPlaying = true;
    			}
            }
		}, 500);
    }



    function removeTail(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
             if(listWidget.getActiveStatus()=="doublylist"){
                if((mode=="exploration")&&listWidget.removeArrTailDoublyList()) {
                    $('#current-action').show();
                    $('#current-action p').html("Remove Tail");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
             }
             else{
                if((mode=="exploration")&&listWidget.removeArrTail()) {
                    $('#current-action').show();
                    $('#current-action p').html("Remove Tail");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
             }
			
		}, 500);
    }

	function removeKth(){
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			var input = $('#v-remove-kth').val();
			//input = input.split(",");
             if(listWidget.getActiveStatus()=="doublylist"){
                if((mode=="exploration")&&listWidget.removeArrKthDoublyList(input)) {
                    $('#current-action').show();
                    $('#current-action p').html("Remove "+ input);
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
             }
             else{
    			if((mode=="exploration")&&listWidget.removeArrKth(input)) {
    				$('#current-action').show();
    				$('#current-action p').html("Remove "+ input);
    				$('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
    				triggerRightPanels();
    				isPlaying = true;
    			}
            }
		}, 500);
    }

     function removeDeque(location){
       if(isPlaying) {  stop(); }
        setTimeout( function() {
            if(location == "front"){
                if((mode=="exploration")&&listWidget.removeArrHeadDoublyList()) {
                    $('#current-action').show();
                    $('#current-action p').html("Remove Front");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
            else{
                if((mode=="exploration")&&listWidget.removeArrTailDoublyList()) {
                    $('#current-action').show();
                    $('#current-action p').html("Remove Back");
                    $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                    triggerRightPanels();
                    isPlaying = true;
                }
            }
        }, 500)
    }

	function createModelingOpen(modelingType)
    {
    	$(".create").css("bottom","114px");
   	 	if (modelingType != "createfixedsize") $('#createfixedsize-input').fadeOut('fast');
    	if (modelingType != "createuserdefined")   $('#createuserdefined-input').fadeOut('fast');
    	$('#' + modelingType + '-input').fadeIn('fast');
    }


	function insertModelingOpen(modelingType)
	{
		$(".insert").css("bottom","60px");
		if (modelingType != "insertkth") $('#insertkth-input').fadeOut('fast');
		if (modelingType != "inserthead")   $('#inserthead-input').fadeOut('fast');
		if (modelingType != "inserttail")  $('#inserttail-input').fadeOut('fast');
		$('#' + modelingType + '-input').fadeIn('fast');
	}

	function removeModelingOpen(modelingType)
	{
		$(".remove").css("bottom","33px");
		$('#' + modelingType + '-input').fadeIn('fast');
	}

	
	//playback controls might fit better in viz.js, but put here in case some viz does not use GraphWidgetNew.js
	var isPaused = false;
	function isAtEnd() {
		return (gw.getCurrentIteration()==(gw.getTotalIteration()-1));
	}
	
	function pause() {
		if(isPlaying) {
			isPaused = true;
			gw.pause();
			$('#play').show();
			$('#pause').hide();
		}
	}
	function play() {
		if(isPlaying) {
			isPaused = false;
			$('#pause').show();
			$('#play').hide();
			if(isAtEnd()) {
				gw.replay();
			} else {
				gw.play();
			}
		}
	}
	function stepForward() {
		if(isPlaying) {
			pause();
			gw.forceNext(250);
		}
	}
	function stepBackward() {
		if(isPlaying) {
			pause();
			gw.forcePrevious(250);	
		}
	}
	function goToBeginning() {
		if(isPlaying) {
			gw.jumpToIteration(0,0);
			pause();
		}
	}
	function goToEnd() {
		if(isPlaying) {
			gw.jumpToIteration(gw.getTotalIteration()-1,0);
			pause();
		}
	}
	function stop() {
		gw.stop();
		isPaused = false;
		isPlaying = false;
		$('#pause').show();
		$('#play').hide();
		$('#current-action').hide();
	}
	
	//shortcut keys for playback controls
	$(document).keydown( function(event) {
		if(event.which == 32) { //spacebar
			if(isPaused) { play(); } else { pause(); }
		} else if(event.which == 37) { //left arrow
			stepBackward();
		} else if(event.which == 39) { //right arrow
			stepForward();
		} else if(event.which == 35) { //end
			stop();
		} else if (event.which == 189) { //minus
			var d = (2200-gw.getAnimationDuration())-100;
			if(d > 0) {
				$("#speed-input").slider("value", d);
			} else {
				$("#speed-input").slider("value", 0);
			}
		} else if (event.which == 187) { //plus
			var d = (2200-gw.getAnimationDuration())+100;
			if(d <= 2000) {
				$("#speed-input").slider("value", d);
			} else {
				$("#speed-input").slider("value", 2000);
			}
		}
	});
	
	//sliders
	$("#speed-input").slider({
		min: 200,
		max: 2000,
		value: 1700,
		change: function(event, ui) {
			gw.setAnimationDuration(2200-ui.value);
		}
	});
	$("#progress-bar").slider({
		range: "min",
		min: 0,
		value: 0,
		slide: function(event, ui) {
			gw.pause();
			gw.jumpToIteration(ui.value,0);
		},
		stop: function(event, ui) {
			if(!isPaused) { setTimeout( function(){gw.play();}, 500) }
		}
	});
	
</script>

</body>
</html>